<!-- 数量选择器 -->
<!--
	为展示单价的html标签添加id='unitpriceTool';
	为展示数量的html标签添加 id='amountTool';
	为展示总价的html标签添加id='totalTool';
 -->

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href='../css/bootstrap.min.css' rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" />

<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
         <script src="../js/html5shiv.min.js"></script>
        	<script src="../js/respond.min.js"></script>
      <![endif]-->
</head>

<body>
	<div class="input-group input-group-sm col-xs-3">
		<span class="input-group-btn">
			<button type="button" class="btn btn-default" onclick="doit(event)"
				value="minus" id="minus" disabled="disabled">-</button> </span> <input
			type="text" class="form-control" id="selectTool" onchange="active()" />
		<span class="input-group-btn">
			<button type="button" class="btn btn-default" onclick="doit(event)"
				value="add">+</button> </span>
	</div>

	<script type="text/javascript">
		function active() {
			var count = document.getElementById('selectTool').value;
			var unitprice = document.getElementById('unitpriceTool').innerText;
			if (count < 1 || isNaN(count)) {
				document.getElementById('selectTool').value = 1;
				document.getElementById('minus').setAttribute("disabled",
						"disabled");
				document.getElementById('amountTool').innerText = document
						.getElementById('selectTool').value;
				document.getElementById('totalTool').innerText = (document
						.getElementById('selectTool').value * unitprice)
						.toFixed(2);
			} else if (!Number.isInteger(count) && count > 1) {
				document.getElementById('selectTool').value = parseInt(count);
				document.getElementById('minus').removeAttribute("disabled");
				document.getElementById('amountTool').innerText = document
						.getElementById('selectTool').value;
				document.getElementById('totalTool').innerText = (document
						.getElementById('selectTool').value * unitprice)
						.toFixed(2);
			} else if (count == 1) {
				document.getElementById('minus').setAttribute("disabled",
						"disabled");
				document.getElementById('amountTool').innerText = document
						.getElementById('selectTool').value;
				document.getElementById('totalTool').innerText = (document
						.getElementById('selectTool').value * unitprice)
						.toFixed(2);
			}
		}

		function doit(evt) {
			var obj = window.event ? evt.srcElement : evt.target;
			var unitprice = document.getElementById('unitpriceTool').innerText;
			if (obj.value == "add") {
				++document.getElementById('selectTool').value;
				document.getElementById('amountTool').innerText = document
						.getElementById('selectTool').value;
				document.getElementById('totalTool').innerText = (document
						.getElementById('selectTool').value * unitprice)
						.toFixed(2);
				document.getElementById('minus').removeAttribute("disabled");
			} else if (obj.value == "minus") {
				if (document.getElementById('selectTool').value > 1) {
					--document.getElementById('selectTool').value;
					if (document.getElementById('selectTool').value <= 1) {
						document.getElementById('minus').setAttribute(
								"disabled", "disabled");
					}
					document.getElementById('amountTool').innerText = document
							.getElementById('selectTool').value;
					document.getElementById('totalTool').innerText = (document
							.getElementById('selectTool').value * unitprice)
							.toFixed(2);
				}
			}
		}
	</script>

	<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
	<script src="../js/jquery-3.1.1.min.js"></script>
	<!-- 包括所有已编译的插件 -->
	<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {//设置数量选择器的初始默认数量
			$('#selectTool').val($('#amountTool').text());
		});
	</script>
</body>

</html>